<template>
  <!-- <el-dialog
    :title="title"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    class="jsbos-dialog jsbos-dialog_center oqBox"
    lock-scroll
    width="1000px"
  > -->
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" :content="content" />
        <div class="options">
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>
      <div class="jsbos-common-layout-main jsbos-flex-main">
        <Echartss ref="Echartss" v-if="echartVisible" :orderId="this.orderId" />
        <jsbos-table :data="dataForm" style="min-height: 500px">
          <el-table-column
            prop="itemName"
            width="auto"
            label="题目"
            align="center"
          />
          <el-table-column
            prop="itemType"
            width="50px"
            label="类型"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.itemType == 'radio'"> 单选 </el-tag>
              <el-tag v-if="scope.row.itemType == 'multiSelect'">多选 </el-tag>
              <el-tag v-if="scope.row.itemType == 'scoring'">打分 </el-tag>
              <el-tag v-if="scope.row.itemType == 'writing'">填报</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="itemResult"
            width="200px"
            label="答案"
            align="center"
          />
          <el-table-column
            prop="questionItem"
            width="auto"
            label="选项"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.itemType == 'radio'">
                <el-radio-group v-model="scope.row.itemResult">
                  <el-radio-button
                    :label="item"
                    :key="item"
                    v-for="item in scope.row.questionItem"
                    disabled
                    >{{ item }}</el-radio-button
                  >
                </el-radio-group>
              </div>
              <div v-if="scope.row.itemType == 'multiSelect'">
                <el-checkbox-group v-model="scope.row.itemResultArr">
                  <el-checkbox-button
                    :label="item"
                    :key="item"
                    v-for="item in scope.row.questionItem"
                    disabled
                    >{{ item }}</el-checkbox-button
                  >
                </el-checkbox-group>
              </div>
              <div v-if="scope.row.itemType == 'writing'">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="scope.row.itemResult"
                  disabled
                >
                </el-input>
              </div>
              <div v-if="scope.row.itemType == 'scoring'">
                <el-rate
                  disabled
                  v-model="scope.row.itemResult"
                  allow-half
                  show-text
                >
                </el-rate>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="creatorUserId"
            width="150px"
            label="填报人"
            align="center"
            fixed="right"
          />
          <el-table-column
            prop="creatorTime"
            width="150px"
            label="填报时间"
            align="center"
          >
            <template slot-scope="scope">
              {{ jsbos.dateFormatDay(scope.row.creatorTime) }}
            </template>
          </el-table-column>
        </jsbos-table>
        <pagination
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          @pagination="init"
        />
      </div>
    </div>
  </transition>
  <!-- </el-dialog> -->
</template>
<script>
import request from "@/utils/request";
import Echartss from "./index.vue";
import { isEmpty } from "@/utils/isEmpty";
export default {
  components: { Echartss },
  props: {
    orderId: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      echartVisible: true,
      itemIds: "",
      content: "调查项详情",
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatorTime",
      },
      title: "问卷结果",
      visible: false,
      dataForm: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goBack() {
      this.$emit("refresh");
    },
    init(data) {
      if (data.itemType !== "writing") {
        this.echartVisible = true;
        let itemId = data.itemId + "," + this.orderId;
        this.$refs.Echartss.initChart(itemId);
      } else {
        this.echartVisible = false;
      }
      this.dataForm.id = data.id || 0;
      this.visible = true;
      let _query = {
        ...this.listQuery,
        itemId: data.itemId,
        questionnaireOrderId: this.orderId,
        enabledMark: "1",
      };
      request({
        url: "/api/questionnaire/OqQuestionnaireOrderRangeItem/getList",
        method: "post",
        data: _query,
      }).then((res) => {
        console.log("res", res);
        if (res.hasOwnProperty("data")) {
          this.dataForm = res.data.list;
          this.total = res.data.pagination.total;
        } else {
          this.dataForm = [];
          this.total = 0;
        }
      });
    },
  },
};
</script>
